<template>
    <div class="content">
        <div class="background_content">
            <image src="http://rzico.oss-cn-shenzhen.aliyuncs.com/v4.0/loginBackground.png"
                   style="width:750px;height: 300px"></image>
        </div>
        <div class="login_content">
            <div class="login_content_app">
                      <div class="tittle_content" @click="tabindexclicktwo">
                      <div  :class="[tabindex==1?'tittle_accounttwo':'tittle_account']">
                             <text :class="[tabindex==1?'tittle_account_title':'tittle_account_title_login']">密码登录</text>
                      </div>
                  </div>
                <!--<div class="tittle_content" @click="tabindexclick">-->
                       <!--<div :class="[tabindex==0?'tittle_accounttwo':'tittle_account']">-->
                           <!--<text :class="[tabindex==0?'tittle_account_title':'tittle_account_title_login']">验证码登录</text>-->
                       <!--</div>-->
                   <!--</div>-->


            </div>
            <div v-if="tabindex==0">
            <div class="button_content">
                <div class="button_phone">
                    <input placeholder="请输入手机号" class="phone_input" maxlength='11' type="number" v-model="phoneNumber"/>
                    <div class="section">
                        <text class="picker">+86</text>
                    </div>
                </div>
                <div class="button_phone">
                    <input placeholder="验证码" class="verification_input" maxlength='4' type="number" v-model="vCode"/>
                    <div class="verification_button" @click="verificationClick" v-if="isShow == true">
                        <text class="verification_button_title">获取验证码</text>
                    </div>
                    <div class="verification_button" v-if="isShow==false">
                        <text class="verification_button_title">{{second+"s"}}</text>
                    </div>
                </div>
            </div>
            <div class="login_click" @click="loginClick">
                <text class="login_click_title">登录</text>
            </div>
            </div>
                 <div v-if="tabindex==1">
            <div class="button_content">
                <div class="button_phone">
                    <input placeholder="请输入账号" class="phone_input" v-model="userName"/>
                </div>
                <div class="button_phone">
                    <input placeholder="请输入密码" type="password"  maxlength='20' class="verification_input" v-model="password"/>
                </div>
                <!--<div class="button_phone">-->
                    <!--<input placeholder="请输入验证码" class="verification_input" maxlength='4'  v-model="loginCode"/>-->
                       <!--<div class="codeImg" @click="createCaptcha">-->
                            <!--<image style="width: 200px;height: 80px" :src="codeImg"></image>-->
                        <!--</div>-->
                <!--</div>-->
            </div>
            <div class="login_click" @click="userloginClick">
                <text class="login_click_title">登录</text>
            </div>
             <div class="login_click1" @click="userRegisteredClick">
               <text class="login_click_title1">注册账号</text>
             </div>
            </div>
        </div>
        <div class="imgaree">
            <div :class="[agreeisshow==false?'bottom_content_image':'bottom_content_image_agree']" @click="agreeshow" >
            <image v-if="agreeisshow==true" src="http://rzico.oss-cn-shenzhen.aliyuncs.com/agree.png" alt="" style="width:35px;height: 35px"></image>
            </div>
            <div class="bottom_content_text" style="margin-top: 10px;display: flex;flex-direction: row;align-items: center">
              <div>
                <text class="bottom_text" style="font-size: 27px;" @click="agreeshow">我已阅读并同意</text>
              </div>
              <text  @click="userAgreement" style="color:#EE6D4D;  font-size: 27px; font-weight: 400;">《用户协议》和</text>
              <text  @click="privacyClick" style="color:#EE6D4D; font-size: 27px; font-weight: 400;">《隐私政策》</text>
              <!-- <text class="bottom_text">和</text>
              <text  @click="privacyClick" style="color:#EE6D4D;  margin-top: 13px;font-size: 30px; font-weight: 400; line-height: 36px;">《隐私政策》</text> -->
            </div>
        </div>



    </div>
</template>

<script>
    import { list, tag } from '../../api/article';
    import {sendMsg, msgLogin,login} from '../../api/user'
    const umengPush = app.requireModule("eeui/umengPush");
    import md5 from 'js-md5';
    export default {
        data() {
            return {
                userName:"",
                password:"",
                loginCode:"",
                agreeisshow:false,
                verifyCodeKey: '',
                lineShow: true,
                phoneNumber: '',
                isShow: true,
                second: 60,
                vCode: '',
                imeiId:'',
                serviceId:"",
                privacyId:"",
                tationcode:"",
                tabindex:1,
                codeImg:""
            }
        },
        created () {
             this.createCaptcha();
        },
		mounted() {
		    this.imeiId = this.getImei()
            this.initId()
		},
        methods: {
            userloginClick(){
                 var _this = this
                if (this.isNull(_this.userName)) {
                    eeui.toast('请输入账号')
                    return;
                }
                if(this.isNull(_this.password)){
                    eeui.toast('请输入密码')
                    return;
                }
//                 if (this.isNull(_this.loginCode)){
//                    eeui.toast('请输入验证码')
//                    return
//                }
                if(this.agreeisshow==false){
                    eeui.toast('请先阅读协议')
                    return;
                }
                let newusername=""
                if(_this.userName.indexOf("mch_")==-1){

                        newusername="mch_"+_this.getGlobalData().mchId+"_"+_this.userName
                }else{
                    newusername=_this.userName
                }
                login({

                    username:newusername,
                    password: md5(_this.password),
                    verifyCodeKey: _this.getGlobalData().uuid,
                    verifyCode: '123456',//_this.loginCode,
                    imeiId:this.imeiId
                }).then(res => {
                    console.log(res)
                    if (res.type == 'success') {
                          let globalData = _this.getGlobalData();
                            globalData.token = res.data.token;
                            globalData.userInfo = res.data.userInfo;
                            _this.setGlobalData(globalData)
                            umengPush.addAlias(res.data.userInfo.id, 'userId', result=>{
                            });
                            eeui.closePage()
                    }
                }).catch(error => {
                    _this.createCaptcha()
                })
            },
            userRegisteredClick(){
                eeui.openPage({
                  params: 2,
                  url: 'root://pages/member/subRegistration/memberRegistration',
                  statusBarType: 'immersion',
                  statusBarStyle: false
                }, function (result) {
                });
          },
            createCaptcha() {
                var _this = this
                _this.codeImg = this.getGlobalData().APP_BASE_API+'/user/getVerifyCode?verifyCodeKey=' + this.getGlobalData().uuid + '&date=' + new Date().getTime()
            },
            tabindexclick(){
                  this.tabindex=0
            },
            tabindexclicktwo(){
                this.tabindex=1
            },
            agreeshow(){
                this.agreeisshow=!this.agreeisshow
            },
            loginClick() {
                var _this = this
                    if(this.agreeisshow==false){
                          eeui.toast('请先阅读协议')
                        return;
                    }
                if (this.vCode.length >= 4) {
                    msgLogin({
                        mchId: _this.getGlobalData().mchId,
                        username: "mch_"+_this.getGlobalData().mchId+"_"+_this.phoneNumber,
                        verifyCode: this.vCode,
						imeiId:this.imeiId
                    }).then(res => {
                        if (res.type == 'success') {
                            let globalData = _this.getGlobalData();
                            globalData.token = res.data.token;
                            globalData.userInfo = res.data.userInfo;
                            console.log("msglogin==")
                            console.log(globalData)
                            _this.setGlobalData(globalData)
                            umengPush.addAlias(res.data.userInfo.id, 'userId', result=>{
                            });
                            eeui.closePage()
                        }
                    }).catch(error => {
                        console.log(error)
                        console.log('2222')
                    })
                } else {
                    eeui.toast('请正确输入验证码')
                }
            },
            //获取文章id
            initId() {
                let params = {
                    mchId: this.getGlobalData().mchId,
                    type: 0
                };
                tag(params)
                    .then(res => {
                        console.log(res);
                        res.data.data.forEach(item => {
                            if (item.name === '服务协议') {
                                this.serviceId = item.id;
                            }
                            if (item.name === '隐私政策'){
                                this.privacyId = item.id;
                            }
                        });
                    })
                    .catch(err => {
                        console.log(err);
                    });
            },
            //服务协议的点击事件
            serviceClick(){
                let params = {
				mchId: this.getGlobalData().mchId,
				tagIds: this.serviceId,
				title:'服务协议'
			};
			eeui.openPage({ url: 'root://pages/member/detail/detail.js', params, statusBarType: "immersion",statusBarStyle: false }, result => {
				console.log('跳转到详情页成功');
			});
            },
            //隐私政策的点击事件
            privacyClick(){
              let params = {
                  mchId: this.getGlobalData().mchId,
                  tagIds: this.privacyId,
                  title:'隐私政策'
                };
                eeui.openPage({ url: 'root://pages/member/detail/detail.js', params, statusBarType: "immersion",statusBarStyle: false }, result => {
                  console.log('跳转到详情页成功');
                });
            },
            userAgreement(){
              if(this.companyName == "便士达"){
                eeui.openWeb('https://www.qmin365.cn/user.html');
              }
              if(this.companyName == "京小东"){
                eeui.openWeb('https://www.qmin365.cn/juser.html');
              }
              if(this.companyName == "测试机"){
                eeui.openWeb('https://www.qmin365.cn/user.html');
              }
            },
            verificationClick() {
                var _this = this
                if (this.phoneNumber == "" || this.phoneNumber.length != 11 || !(/^((13[0-9])|(14[0-9])|(15[0-9])|(17[0-9])|(18[0-9])|(19[0-9]))\d{8}$/.test(this.phoneNumber))) {
                    eeui.toast('请输入正确手机号码')
                    return;
                }
                console.log(_this.getGlobalData().mchId)
                sendMsg({
                    username: _this.phoneNumber,
                    tplKey: 'register',
                    mchId: _this.getGlobalData().mchId,
                }).then(res => {
                    this.timer()
                    this.isShow = false
                    console.log(res)
                }).catch(error => {
                    console.log(error)
                })
            },
            timer: function () {
                let promise = new Promise((resolve, reject) => {
                    let setTimer = setInterval(
                        () => {
                            this.second = this.second - 1
                            if (this.second <= 0) {
                                this.second = 60;
                                this.isShow = true;
                                resolve(setTimer)
                            }
                        }, 1000)
                });
                promise.then((setTimer) => {
                    clearInterval(setTimer)
                });
            },
        }
    }
</script>

<style scoped>
    .content, body {
    }

    .login_content {
        padding-top: 80px;
        /* height: 824px; */
        display: flex;
        align-items: center;
        flex-direction: column;
        z-index: 1;
    }

    .tittle_content {
        width: 360px;
        margin-top: 30px;
        display: flex;
        flex-direction: column;
        align-items: center;

}

    .account {
        margin-top: 60px;
    }

    .tittle_account {
        /* height: 41px; */
        margin-top: 40px;
    }

    .tittle_account_title {
        font-size: 44px;
        font-weight: 400;
        color: rgba(231, 91, 83, 1);
        /* line-height: 48px; */
    }

    .tittle_verification {
        height: 41px;
        font-size: 44px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        line-height: 48px;
    }

    .under_line {
        width: 219px;
        height: 11px;
    }

    .bottom_content {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items:flex-end;
        width: 750px;
        /*position: absolute;*/
        bottom: 100px;

    }
    .bottom_content_image{
        width: 35px;
        height: 35px;
        border-width: 1px;
        border-style: solid;
        border-color: #999999;
        margin-right: 10px;

        margin-top: 10px;
    }
    .bottom_content_image_agree{
          width: 35px;
        height: 35px;
        /* border-width: 1px;
        border-style: solid;
        border-color: #ffffff; */
        margin-right: 10px;
        margin-top: 10px;
        /* margin-bottom: 5px; */
    }
    .bottom_content_text{
        width: 550px;
        display:flex;
        flex-direction: row;
        align-items: center;
		margin-bottom:4px;
    }

    .top_text {
        font-size: 24px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        line-height: 36px;
        opacity: 0.3;
    }

    .bottom_text {
        font-size: 30px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
    }

    .login_click {
        width: 650px;
        height: 84px;
        background-image: linear-gradient(to right, rgba(237, 86, 75, 1), rgba(245, 113, 74, 1));
        border-radius: 4px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 20px;
        /* position: absolute;
        top: 600px; */
    }
    .login_click1{
      width: 650px;
      height: 84px;
      /*background-image: linear-gradient(to right, rgba(237, 86, 75, 1), rgba(245, 113, 74, 1));*/
      border-radius: 4px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 20px;
      border-style: solid;
      border-color: black;
      border-width: 1px;
    }

    .login_click_title {
        font-size: 32px;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
    }
    .login_click_title1 {
      font-size: 32px;
      font-weight: 400;
      color: #0b1b2b;
    }


    .background_content {
        position: absolute;
        width: 750px;
        height: 300px;
        left: 0;
        top: 0;
        z-index: -1;
        opacity: 0.8;
    }


    .button_content {
        display: flex;
        flex-direction: column;
        margin-top: 150px;
        margin-left: 0px;
    }

    .button_phone {
        width: 654px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-direction: row;
        height: 106px;
        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-bottom-color: rgba(212, 215, 220, 1);
    }

    .phone_input {
        width: 564px;
        font-size: 28px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        line-height: 48px;
        opacity: 0.4;
    }

    .verification_input {
        width: 480px;
        height: 106px;
        font-size: 28px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        line-height: 48px;
        opacity: 0.4;
    }

    .verification_button {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 168px;
        height: 56px;
        border-style: solid;
        border-width: 1px;
        border-color: rgba(212, 215, 220, 1);
    }

    .verification_button_title {
        border-radius: 4px;
        font-size: 24px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
    }

    .picker {
        font-size: 28px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        line-height: 42px;
    }

    .section {
        display: flex;
        flex-direction: row;
        align-items: center;
    }
        .tittle_accounttwo {
        /* height: 41px; */
        margin-top: 40px;
        border-bottom-style: solid;
        border-bottom-width: 1px;
        border-bottom-color:rgba(231, 91, 83, 1);
    }
    .login_content_app{
      /* background-color: aquamarine; */
      display: flex;
      flex-direction: row;
      justify-content: space-between;
    }
   .tittle_account_title_login{
        font-size: 38px;
        font-weight: 400;
           color: rgba(231, 91, 83, 1);
        /* line-height: 48px; */
    }
.imgaree{
    margin-top:20px;
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: center;
}
</style>
